<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/stuWelcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>成绩管理</el-breadcrumb-item>
      <el-breadcrumb-item>个人成绩</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" :model="student" class="demo-form-inline" label-width="auto">
      <el-form-item label="学号：">
        <el-input v-model="student.stuNum" placeholder="学号" readonly></el-input>
      </el-form-item>
      <el-form-item label="姓名：">
        <el-input v-model="student.stuName" placeholder="姓名" readonly></el-input>
      </el-form-item>
      <el-form-item label="身份证号：">
        <el-input v-model="student.stuCard" placeholder="身份证号" readonly></el-input>
      </el-form-item>
      <el-form-item label="学院：">
        <el-input v-model="student.stuAcademy" placeholder="学院" readonly></el-input>
      </el-form-item>
      <el-form-item label="专业：">
        <el-input v-model="student.stuMajor" placeholder="专业" readonly></el-input>
      </el-form-item>
      <el-form-item label="行政班级：">
        <el-input v-model="student.stuClass" placeholder="班级" readonly></el-input>
      </el-form-item>
    </el-form>
    <el-row :gutter="10">
      <!--搜索框-->
      <el-col :span="6">
        <el-input placeholder="按学年查询" v-model="searchYear" class="input-with-select" @keyup.enter.native="searchData1">
          <el-button slot="append" icon="el-icon-search" @click="searchdata1"></el-button>
        </el-input>
      </el-col>
      <el-col :span="6" style="margin-left: 90px;margin-right: 90px;">
        <el-input placeholder="按课程名称查询" v-model="search" class="input-with-select" @keyup.enter.native="searchData2">
          <el-button slot="append" icon="el-icon-search" @click="searchdata"></el-button>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-input placeholder="按课程性质查询" v-model="searchNature" class="input-with-select"
                  @keyup.enter.native="searchData3">
          <el-button slot="append" icon="el-icon-search" @click="searchdata2"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <!--表单模块-->
    <el-table :data="grades" border stripe height="300" style="margin-top: 30px;" highlight-current-row>
      <el-table-column type="index" fixed align="center"></el-table-column>
      <el-table-column prop="gradeYear" label="学年" align="center" width="130"></el-table-column>
      <el-table-column prop="gradeTerm" label="学期" align="center"></el-table-column>
      <el-table-column prop="stuNum" label="学号" align="center" width="120"></el-table-column>
      <el-table-column prop="couId" label="课程号" align="center" width="120"></el-table-column>
      <el-table-column prop="couName" label="课程名称" align="center" width="150"></el-table-column>
      <el-table-column prop="couNature" label="课程性质" align="center"></el-table-column>
      <el-table-column prop="couCredit" label="学分" align="center"></el-table-column>
      <el-table-column prop="gradePoint" label="绩点" align="center"></el-table-column>
      <el-table-column prop="grade" label="成绩" align="center"></el-table-column>
      <el-table-column prop="couCollege" label="开课学院" align="center" width="150"></el-table-column>
    </el-table>
    <!--分页插件-->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="curpage"
      :page-sizes="[2, 4, 8, 10]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next"
      :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
  import axios from 'axios';//axios
  export default {
    name:"stuGrade",
    //绑定数据
    data() {
      return {
        // 学生信息
        student:{
          stuNum:"",
          stuName:"",
          stuCard:"",
          stuAcademy:"",
          stuMajor:"",
          stuClass:""
        },
        grades:[],//注意使用表格时，pop属性对应的内容等价于后端数据传输的字段(键)
        curpage:1,//当前页
        pagesize:4,//每页显示条数
        total:0,//总条数
        search:"",
        searchYear:"",
        searchNature:""
      }
    },
    //文档加载事件,当没有任何按钮去点击触发事件时，可以使用该函数在加载时，触发事件！
    mounted() {
      this.gradeList();
      this.selectOne();
    },
    methods:{
      selectRow(row) { // 给操作行 高亮
        if (row) {
          this.$refs.table.setCurrentRow(row, true);  // 高亮某一行
        } else {
          this.$refs.table.setCurrentRow();  // 取消高亮
        }
      },
      // 获取学生信息
      selectOne(){
        let stuNum = localStorage.getItem("stuNum");
        // 发起GET请求，获取信息
        axios.get(
          "http://localhost:1313/student/selectOne",
          {params:{stuNum:stuNum}}
        ).then((res)=>{
          console.log(res);
          if(res.data.code == 200){
            // 将返回的数据赋值给student表单
            this.student.stuNum = res.data.data.stuNum;
            this.student.stuName = res.data.data.stuName;
            this.student.stuCard = res.data.data.stuCard;
            this.student.stuAcademy = res.data.data.stuAcademy;
            this.student.stuMajor = res.data.data.stuMajor;
            this.student.stuClass = res.data.data.stuClass;
          }else{
            this.$message.error(res.data.msg)
          }
        })
      },
      // 监听 pageSize 改变的事件
      handleSizeChange (newSize) {
        //   console.log(newSize)
        //  将监听接受到的每页显示多少条的数据 newSzie 赋值给 pagesize
        this.pagesize = newSize;
        //  修改完以后，重新发起请求获取一次数据
        this.gradeList();
      },
      // 监听 页码值  改变的事件
      handleCurrentChange (newPage) {
        //   console.log(newPage)
        //  将监听接受到的页码值的数据 newPage 赋值给 pagenum
        this.curpage = newPage;
        //  修改完以后，重新发起请求获取一次数据
        this.gradeList();
      },
      //执行分页查询的函数
      gradeList(curpage = 1) {
        var grades=this;
        let stuNum = localStorage.getItem("stuNum");
        axios.get(
          "http://localhost:1313/grade/queryGradeByStuNumPage",
          {params:{current:grades.curpage, rows: grades.pagesize,search:stuNum}}
        ).then((res)=>{
          console.log(res)
          //将返回数据赋值给绑定数据，完成数据渲染
          this.grades = res.data.data.grades;
          this.total = res.data.data.total;
        });
      },
      //模糊查询
      searchdata(){
        this.curpage = 1;
        var grades=this;
        let stuNum = localStorage.getItem("stuNum");
        axios.get(
          "http://localhost:1313/grade/queryGradeByPage",
          {params:{current:grades.curpage, rows: grades.pagesize,stuNum:stuNum,search:grades.search}}
        ).then((res)=>{
          console.log(res)
          //将返回数据赋值给绑定数据，完成数据渲染
          this.grades = res.data.data.grades;
          this.total = res.data.data.total;
        });
        this.search ="";
      },
      // 根据学年完成查询
      gradeList1(){
        var grades=this;
        let stuNum = localStorage.getItem("stuNum");
        axios.get(
          "http://localhost:1313/grade/queryGradeByGradeYearPage",
          {params:{current:grades.curpage, rows: grades.pagesize,stuNum:stuNum,search:grades.searchYear}}
        ).then((res)=>{
          console.log(res)
          //将返回数据赋值给绑定数据，完成数据渲染
          this.grades = res.data.data.grades;
          this.total = res.data.data.total;
        });
      },
      // 根据课程性质完成查询
      gradeList2(){
        var grades=this;
        let stuNum = localStorage.getItem("stuNum");
        axios.get(
          "http://localhost:1313/grade/queryGradeByCouNaturePage",
          {params:{current:grades.curpage, rows: grades.pagesize,stuNum:stuNum,search:grades.searchNature}}
        ).then((res)=>{
          console.log(res)
          //将返回数据赋值给绑定数据，完成数据渲染
          this.grades = res.data.data.grades;
          this.total = res.data.data.total;
        });
      },
      searchdata1(){
        this.curpage = 1;
        this.gradeList1();
        this.searchYear ="";
      },
      searchdata2(){
        this.curpage = 1;
        //回调分页查询，增加分页查询的参数
        this.gradeList2();
        this.searchNature ="";
      },
      // 按下回车键实现搜索
      searchData1(e){
        var keyCode = window.event? e.keyCode:e.which;
        console.log("回车搜索", keyCode, e);
        if (keyCode == 13) {
          this.searchdata1();
        }
      },
      // 按下回车键实现搜索
      searchData2(e){
        var keyCode = window.event? e.keyCode:e.which;
        console.log("回车搜索", keyCode, e);
        if (keyCode == 13) {
          this.searchdata();
        }
      },
      // 按下回车键实现搜索
      searchData3(e){
        var keyCode = window.event? e.keyCode:e.which;
        console.log("回车搜索", keyCode, e);
        if (keyCode == 13) {
          this.searchdata2();
        }
      }
    }
  }

</script>

<style>
  /* 用来设置当前页面element全局table 选中某行时的背景色*/
  .el-table__body tr.current-row>td{
    background-color:  rgba(227, 189, 241, 0.76) !important;
    color: #fff;
  }
  .el-input--suffix .el-input__inner {
    padding-right: 15px;
  }
  .form{
    display: grid;
    justify-content: center;
    /* align-items: center; */
    justify-items: center;
  }
  .el-button--info.is-plain {
    color: #704141;
    background: #f4f4f5;
    border-color: #d3d4d6;
  }
  .el-button--mini {
    font-size: 14px;
    border-radius: 3px;
  }
  .el-breadcrumb{
    padding-bottom: 20px;
  }
  .el-pagination{
    padding-top: 20px;
  }
</style>
